<template>
  <div>
    <el-dialog
      title="标案信息"
      :visible.sync="visible"
      width="80%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions title="标案信息" class="titleTop" :column="3" border>
          <el-descriptions-item label="标案编码">
            {{ form.tenderCode }}
          </el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag type="danger">
              {{ stateConvert(form.state) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标案名称">
            {{ form.tenderName }}
          </el-descriptions-item>
          <el-descriptions-item label="招标类型">
            {{ form.tenderType.productType }}
          </el-descriptions-item>
          <el-descriptions-item label="招标项目">
            {{ form.tenderProject.projectName }}
          </el-descriptions-item>
          <el-descriptions-item label="立标日期">
            {{ form.tenderTime }}
          </el-descriptions-item>
          <el-descriptions-item label="招标负责人">
            {{ form.tenderCharge }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ form.tenderPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="固定电话">
            {{ form.tenderTel }}
          </el-descriptions-item>
          <el-descriptions-item label="招标方式">
            {{ form.tenderCode === 0 ? "公开招标" : "非公开招标" }}
          </el-descriptions-item>
          <el-descriptions-item label="竞价方式">
            {{ bindMode(form.biddingMode) }}
          </el-descriptions-item>
          <el-descriptions-item label="招标说明">
            {{ form.tenderExplain }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          title="招标产品"
          class="titleTop"
          :column="2"
          border
          v-for="product in form.products"
          :key="product.id"
        >
          <el-descriptions-item label="产品名称">
            {{ product.productName }}
          </el-descriptions-item>
          <el-descriptions-item label="样例图">
            <el-image
              style="width: 100px; height: 100px"
              :src="product.imageUrl"
              fit="scale-down"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="产品型号">
            {{ product.productModel }}
          </el-descriptions-item>
          <el-descriptions-item label="产品编码">
            {{ product.productCode }}
          </el-descriptions-item>
          <el-descriptions-item label="产品单位">
            {{ product.productUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="采购数量">
            {{ product.purchaseData }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          class="titleTop"
          :column="2"
          border
          v-for="(time, index) in form.timeNodes"
          :key="index"
          :title="(index+1)+'轮竞价时间'"
        >
          <el-descriptions-item label="开始时间">
            {{ time.bindingStart }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            {{ time.bindingEnd }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="定价时间" class="titleTop" :column="3" border>
          <el-descriptions-item label="开始时间">
            {{ form.calibrationStart }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            {{ form.calibrationEnd }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          title="邀约供应商"
          class="titleTop"
          :column="2"
          border
          v-for="(supplier, index) in form.suppliers"
          :key="index+'supplier'"
        >
          <el-descriptions-item label="供应商名">
            {{ supplier.supplier }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ supplier.mobilePhone }}
          </el-descriptions-item>
          <el-descriptions-item label="所属公司">
            {{ supplier.companyName }}
          </el-descriptions-item>
          <el-descriptions-item label="所得积分">
            {{ supplier.integral }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Object,
    },
  },

  data() {
    return {
      form: {
        id: "",
        tenderCode: "",
        tenderName: "",
        tenderType: {
          id: "",
          productType: "",
          description: null,
        },
        tenderProject: {
          id: "",
          projectName: "",
        },
        tenderTime: "",
        tenderCharge: "",
        tenderPhone: "",
        tenderTel: "",
        tenderMode: 0,
        biddingMode: 1,
        tenderRanking: true,
        minimumPrice: true,
        tenderExplain: "",
        state: 0,
        calibrationStart: "",
        calibrationEnd: "",
        applyTime: "",
        verifyTime: null,
        purchaser: null,
        products: [
          {
            id: "",
            productName: "",
            productCode: "",
            productUnit: "",
            productModel: "",
            imageUrl: "",
            purchaseData: 200,
          },
        ],
        timeNodes: [
          {
            bindingStart: "",
            bindingEnd: "",
            round: 1,
          },
        ],
        suppliers: [],
      },
    };
  },

  computed: {
    // business(){
    //   const res = this.productInfo.productTypes.map(typeInfo => {
    //     return typeInfo.productType;
    //   });
    //   return res.join(",");
    // }
  },
  methods: {
    open() {
      this.form = this.data;
    },
    stateConvert(val) {
      if (val === 0) {
        return "暂存标案";
      } else if (val === 1) {
        return "待审标案";
      } else if (val === -1) {
        return "退回标案";
      } else if (val === -2) {
        return "等待删除";
      } else if (val === 2) {
        return "待开始";
      } else if (val === 3) {
        return "未竞价";
      } else if (val === 4) {
        return "竞价中";
      } else if (val === 5) {
        return "本轮竞价结束";
      } else if (val === 6) {
        return "待定标";
      } else if (val === 7) {
        return "已定标";
      }
    },
    bindMode(val) {
      if (val === 1) {
        return "一轮竞价";
      } else if (val === 2) {
        return "二轮竞价";
      } else {
        return "三轮竞价";
      }
    },
    cancel() {
      this.initTenderInfo();
      this.$emit("cancel");
    },
    initTenderInfo() {
      this.form = {
        id: "",
        tenderCode: "",
        tenderName: "",
        tenderType: {
          id: "",
          productType: "",
          description: null,
        },
        tenderProject: {
          id: "",
          projectName: "",
        },
        tenderTime: "",
        tenderCharge: "",
        tenderPhone: "",
        tenderTel: "",
        tenderMode: 0,
        biddingMode: 1,
        tenderRanking: true,
        minimumPrice: true,
        tenderExplain: "",
        state: 0,
        calibrationStart: "",
        calibrationEnd: "",
        applyTime: "",
        verifyTime: null,
        purchaser: null,
        products: [
          {
            id: "",
            productName: "",
            productCode: "",
            productUnit: "",
            productModel: "",
            imageUrl: "",
            purchaseData: 200,
          },
        ],
        timeNodes: [
          {
            bindingStart: "",
            bindingEnd: "",
            round: 1,
          },
        ],
        suppliers: [],
      };
    },
  },
};
</script>

<style scoped>
.titleTop {
  margin-top: 20px;
}
</style>
